<!--
 * @FileDescription 菜单页
 * @Author lz
 * @Date 20230118 10:19:34
 * @LastEditors lz
 * @LastEditTime 20230118 10:19:34
-->
<template>
    <div class="wp">
        <!-- 顶部 -->
        <hdrModel Hierarchy="1" :ID="0"></hdrModel>
        <!-- 侧边栏 -->
        <div class="Sidebar" v-if="state.showHide">
            <div class="putAway" @click="show()"></div>
            <!-- 
            <div class="drop-downMenu">
                <a-menu v-model:selectedKeys="state.selectedKeys" mode="inline" :open-keys="state.openKeys"
                    @openChange="onOpenChange">
                    <a-sub-menu :key="MenuIndexData.Default.MultimeterData.value.Key"
                        @click.stop="obtain(MenuIndexData.Default.MultimeterData.value)">
                        <template #icon>
                            <div class="sign">
                            </div>
                        </template>
                        <template #title>{{ MenuIndexData.Default.MultimeterData.value.Title }}</template>
                        <template v-for=" ( items, index ) in MenuIndexData.Default.MultimeterData.value.Children"
                            :key="items.key">
                            <template v-if="items.Children.length > 0">
                                <a-sub-menu :title="items.Title" :key="items.Key" style="padding-left: 10%;"
                                    @click.stop="obtain(items)">

                                    <template v-for="( ChildrenItem, indexs ) in items.Children" :key="ChildrenItem.key">
                                        <template v-if="ChildrenItem.Children.length > 0">
                                            <a-sub-menu :title="ChildrenItem.Title" :key="ChildrenItem.Key"
                                                @click.stop="obtain(ChildrenItem)" style="padding-left: 10%;">

                                                <template v-for="( ChildrenItems, indexss ) in ChildrenItem.Children"
                                                    :key="ChildrenItems.key">
                                                    <template v-if="ChildrenItems.Children.length > 0">
                                                        <a-sub-menu :title="ChildrenItems.Title" :key="ChildrenItems.Key"
                                                            @click.stop="obtain(ChildrenItems)" style="padding-left: 10%;">

                                                            <template v-for="(last, indexsss) in ChildrenItems.Children"
                                                                :key="last.Key">
                                                                <a-menu-item @click.stop="obtain(last)">{{
                                                                    last.Title
                                                                }}</a-menu-item>
                                                            </template>

                                                        </a-sub-menu>
                                                    </template>
                                                    <template v-if="ChildrenItems.Children.length == 0">
                                                        <a-menu-item :key="ChildrenItems.Key"
                                                            @click.stop="obtain(ChildrenItems)">{{
                                                                ChildrenItems.Title
                                                            }}</a-menu-item>
                                                    </template>
                                                </template>

                                            </a-sub-menu>
                                        </template>
                                        <template v-if="ChildrenItem.Children.length == 0">
                                            <a-menu-item :key="ChildrenItem.Key" @click.stop="obtain(ChildrenItem)">{{
                                                ChildrenItem.Title
                                            }}</a-menu-item>
                                        </template>
                                    </template>

                                </a-sub-menu>
                            </template>
                            <template v-if="items.Children.length == 0">
                                <a-menu-item :key="items.Key" @click.stop="obtain(items)">{{
                                                                                    items.Title
                                                                                }}</a-menu-item>
                                                                            </template>
                                                                        </template>
                                                                    </a-sub-menu>
                                                                </a-menu>
                                                            </div> -->
            <!-- ant-tree-node-selected @select="onSelect"-->
            <a-tree :field-names="fieldNames" v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys"
                :tree-data="[MenuIndexData.Default.MultimeterData.value]" @click="SelectSystem" @select="onSelect">
                <template #icon="{ key, selected }">
                    <div v-if="key == MenuIndexData.Default.MultimeterData.value.Key" class="sign">
                    </div>
                </template>
            </a-tree>
        </div>
        <div class="SidebarHide" v-if="!state.showHide">
            <div class="openBar" @click="show()"></div>
        </div>
        <!-- 底部分类按钮 -->
        <div class="btnBox">
            <div style="float: left;" v-for=" (item, index) in state.Classifications" :key="index">
                <div class="structure" @click="seleClass(1, item)" :class="state.selectedType == 1 ? 'ChickOut' : ''"
                    v-if="item.Type == '结构'">
                    <div class="structure_img">
                    </div>
                    <div class="txt">
                        结构
                    </div>
                </div>
                <div class="form" @click="seleClass(2, item)" :class="state.selectedType == 2 ? 'ChickOut' : ''"
                    v-if="item.Type == '组成'">
                    <div class="form_img">
                    </div>
                    <div class="txt">
                        组成
                    </div>
                </div>
                <div class="principle" @click="seleClass(3, item)" :class="state.selectedType == 3 ? 'ChickOut' : ''"
                    v-if="item.Type == '原理'">
                    <div class="principle_img">
                    </div>
                    <div class="txt">
                        原理
                    </div>
                </div>
                <div class="parameter" @click="seleClass(4, item)" :class="state.selectedType == 4 ? 'ChickOut' : ''"
                    v-if="item.Type == '参数'">
                    <div class="parameter_img">
                    </div>
                    <div class="txt">
                        参数
                    </div>
                </div>
            </div>

        </div>

        <!-- Model -->
        <div class="ModelBox">

        </div>

        <!-- 信息标签 -->
        <div v-if="state.selectedType == 2 && state.EAI == true || state.selectedType == 4 && state.EAI == true">
            <labels v-for=" (item, index) in MenuIndexData.Default.LabelDataList.value" :Name="item.Name"
                :RecordID="state.RecordID" :Keys="item.InstanceId" :Length="item.Length"
                :ViewportPointX="item.ViewportPointX + '%'" :ViewportPointY="item.ViewportPointY + '%'"
                :Direction="item.Direction" :key="item.InstanceId" @click="Select(item.InstanceId)">
            </labels>
        </div>

        <!-- 消息框 -->
        <tipsModel v-if="state.selectedType != 4 && state.selectedType != 0" :tipsModelContent="state.tipsModelContent"
            :tipsModelTitle="state.tipsModelTitle">
        </tipsModel>

        <Speak hidden ref="audioRef" :stats="HomeContent.Default.pausableType.value"
            v-show="HomeContent.Default.VoiceControl.value">
            {{ state.tipsModelContent }}
        </Speak>

    </div>
</template>

<script setup lang="ts">
import Speak from '@components/TTS/Speak.vue';

import tipsModel from '../tipsBox/index.vue'
import labels from '../labelBox/label.vue'
import hdrModel from '../header/index.vue'
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, watch } from 'vue'
import MenuIndexData, { TypeData, Result } from './MenuIndex';
import HomeContent from '../HomeContent';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import OrbitCameraComponent from '@components/Apps/InertialNavigation/OrbitCameraComponent';
import AssetLoaderComponent from '@runtime/UnityEngineBridge/AssetLoaderComponent';
import GameObjectComponent from '@runtime/UnityEngineBridge/GameObjectComponent';
import AnimatorComponent from '@runtime/UnityEngineBridge/AnimatorComponent';
import TimerComponent from '@runtime/module/Timer/TimerComponent';
import LabelComponent from '@runtime/UnityEngineBridge/LabelComponent';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import MessageCode from '../MessageCode';
import HighlighterComponent from '@runtime/UnityEngineBridge/HighlighterComponent';

import type { TreeProps } from 'ant-design-vue';
const audioRef = ref()
const fieldNames: TreeProps['fieldNames'] = {
    children: 'Children',
    title: 'Title',
    key: 'Key',
};
const expandedKeys = ref<string[]>([MenuIndexData.Default.MultimeterData.value.Key]);
const selectedKeys: any = ref<string[]>([MenuIndexData.Default.MultimeterData.value.Key]);
// const historySelectedKeys: any = ref<string>()

watch(selectedKeys, () => {
    // console.log('expandedKeys', expandedKeys.value[0]);  //最外层父节点 
    // console.log('fieldNames', fieldNames); // 结构
    console.log("selectedKeys._value[0]", selectedKeys._value[0]);  // 点击的那个名称
    if (selectedKeys._value[0] != undefined) {
        obtain(selectedKeys._value[0])
    }
});
function onSelect(keys: any, info: any) {
    if (keys.length == 0) {
        selectedKeys.value.push(info.node.Key)
    }
}

const state = reactive({
    rootSubmenuKeys: [''],
    openKeys: [MenuIndexData.Default.MultimeterData.value.Key],
    selectedKeys: [],
    EAI: false,
    showHide: true,
    selectedType: 0,
    newData: [{
        Direction: 315,
        InstanceId: -826,
        Length: 150,
        Name: "上车架",
        Version: 15,
        ViewportPointX: 27.809999465942383,
        ViewportPointY: 49.59000015258789,
    }],
    Classifications: TypeData,
    StoragePath: '',
    tipsModelContent: ' ',
    tipsModelTitle: '',
    AssDuration: 0,
    RecordID: -1,
});

const onOpenChange = (openKeys: string[]) => {

    console.log(openKeys, '选中的KKKKKKKKKKKKKKKKKK');

    const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
    if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
        state.openKeys = openKeys;
    } else {
        state.openKeys = latestOpenKey ? [latestOpenKey] : [];
    }
};

// let string2 = '枯藤老树昏鸦#&#古道西风瘦马'
// let interceptStr2 = string2.replace(/(\S*)#&#/, "");
// console.log(interceptStr2);

// 高亮点击(信息标签)
async function Select(val: number) {
    console.log('val点击高亮', val);
    if (val == state.RecordID) {
        // 清除高亮
        await HighlighterComponent.Default.ClearAsync();
        state.RecordID = -1
    } else if (val != state.RecordID) {
        // 清除高亮
        await HighlighterComponent.Default.ClearAsync();
        // console.log(val, '获得的id');
        let id: Array<number> = [val]
        await HighlighterComponent.Default.UpdateAsync(id);
        state.RecordID = val
    }
}

// 已加载模型数组
let newArr = ref(new Map())

let Id: number = 0

let PerD: any = {}
let Content = ref([])

async function obtain(val: any) {

    state.EAI = false

    // 清除旋转
    WebSocketComponent.Default.PostMessage(new ClientMessage.OrbiiCameraAutoObservationMessage())

    // 清除高亮
    await HighlighterComponent.Default.ClearAsync();

    //获取节点数据
    const resData: ClientMessage.StructureAdapterResponse = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.StructureAdapterRequest(MessageCode.Default.MsgCodesList.STRUCTURE_GET_TREE_MENU_NODE, val))
    console.log('obtain获取节点数据===================', resData);
    const DataList = JSON.parse(resData.Content)
    console.log('获取的当前侧边栏的数据',DataList);
    Content.value = DataList.Result._v

    state.tipsModelContent = DataList.Result._v[0].Content
    state.tipsModelTitle = DataList.Result._v[0].Title
    state.AssDuration = DataList.Result._v[0].Duration
    LabelComponent.Default.Clear()


    if (state.StoragePath != '') {
        // 隐藏模型
        await GameObjectComponent.Default.HideAsync(newArr.value.get(state.StoragePath));
    }

    if (newArr.value.get(DataList.Result._v[0].Asset) == undefined) {

        if (DataList.Result._v[0].Type == '组成') {
            state.selectedType = 2
        } else if (DataList.Result._v[0].Type == '参数') {
            state.selectedType = 4
        } else if (DataList.Result._v[0].Type == '结构') {
            state.selectedType = 1
        } else if (DataList.Result._v[0].Type == '原理') {
            state.selectedType = 3
        }



        //模型自动旋转
        if (state.selectedType = 1) {
            WebSocketComponent.Default.PostMessage(new ClientMessage.OrbiiCameraAutoObservationMessage(18))
        }

        //首次加载
        Id = await AssetLoaderComponent.Default.LoadAsync(DataList.Result._v[0].Asset);
        // 视角
        const PerspectiveData: ClientMessage.StructureAdapterResponse = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.StructureAdapterRequest(MessageCode.Default.MsgCodesList.STRUCTURE_GET_VIEW, DataList.Result._v[0].Asset + DataList.Result._v[0].Type))
        PerD = JSON.parse(PerspectiveData.Content).Result
        await OrbitCameraComponent.Default.UpdateV2Async(PerD.TargetContainer, PerD.Horizontal, PerD.Vertical, PerD.Distance, PerD.MinDistance, PerD.MaxDistance, PerD.RotateSensitivity, PerD.RotateSensitivity, PerD.ScrollSensitivity);
        // 类型信息
        state.Classifications = DataList.Result._v
        // 储存键值对
        newArr.value.set(DataList.Result._v[0].Asset, Id)
        state.StoragePath = DataList.Result._v[0].Asset
        // 模型动画
        if (DataList.Result._v[0].Type == '组成') {
            await AnimatorComponent.Default.PlayAsync(Id, 'Default', state.AssDuration)
        } else if (DataList.Result._v[0].Type == '原理') {
            await AnimatorComponent.Default.PlayAsync(Id, 'Default', state.AssDuration)
        }
        // await TimerComponent.Default.WaitAsync(2000)

        // 标签判定
        if (DataList.Result._v[0].Type == '组成') {
            setTimeout(async () => {
                await LabelComponent.Default.LoadAsync(Id)
                state.EAI = true                
            }, state.AssDuration);
        } else if (DataList.Result._v[0].Type == '参数') {
            await LabelComponent.Default.LoadAsync(Id)
            state.EAI = true
        }

        //语音播放
        // if (DataList.Result._v[0].Type != '参数') {
        //     if (HomeContent.Default.pausableType.value.pausable == false) {
        //         setTimeout(() => {
        //             HomeContent.Default.pausableType.value.pausable = false
        //         }, 2000);
        //     }
        // }
        if(!HomeContent.Default.ispPausePlay.value) {
            if(DataList.Result._v[0].Content != '') {
                // 发消息播放
                await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.StartPlaySoundRequest(DataList.Result._v[0].Content))
            }
        }


    } else {
        // console.log('已加载')
        if (DataList.Result._v[0].Type == '组成') {
            state.selectedType = 2
        } else if (DataList.Result._v[0].Type == '参数') {
            state.selectedType = 4
        } else if (DataList.Result._v[0].Type == '结构') {
            state.selectedType = 1
        } else if (DataList.Result._v[0].Type == '原理') {
            state.selectedType = 3
        }

        //模型自动旋转
        if (state.selectedType = 1) {
            WebSocketComponent.Default.PostMessage(new ClientMessage.OrbiiCameraAutoObservationMessage(18))
        }

        // 显示模型
        await GameObjectComponent.Default.ShowAsync(newArr.value.get(DataList.Result._v[0].Asset));
        // 视角
        const PerspectiveData: ClientMessage.StructureAdapterResponse = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.StructureAdapterRequest(MessageCode.Default.MsgCodesList.STRUCTURE_GET_VIEW, DataList.Result._v[0].Asset + DataList.Result._v[0].Type))
        PerD = JSON.parse(PerspectiveData.Content).Result
        await OrbitCameraComponent.Default.UpdateV2Async(PerD.TargetContainer, PerD.Horizontal, PerD.Vertical, PerD.Distance, PerD.MinDistance, PerD.MaxDistance, PerD.RotateSensitivity, PerD.RotateSensitivity, PerD.ScrollSensitivity);
        // 储存键值对
        state.StoragePath = DataList.Result._v[0].Asset
        // 类型信息
        state.Classifications = DataList.Result._v
        // 模型动画
        if (DataList.Result._v[0].Type == '组成') {
            await AnimatorComponent.Default.PlayAsync(newArr.value.get(DataList.Result._v[0].Asset), 'Default', state.AssDuration)
        } else if (DataList.Result._v[0].Type == '原理') {
            await AnimatorComponent.Default.PlayAsync(newArr.value.get(DataList.Result._v[0].Asset), 'Default', state.AssDuration)
        }
        // await TimerComponent.Default.WaitAsync(2000)

        // 标签判定
        if (DataList.Result._v[0].Type == '组成') {
            setTimeout(async () => {
                await LabelComponent.Default.LoadAsync(newArr.value.get(DataList.Result._v[0].Asset))
            }, state.AssDuration);            
        } else if (DataList.Result._v[0].Type == '参数') {
            await LabelComponent.Default.LoadAsync(newArr.value.get(DataList.Result._v[0].Asset))
        }

        //语音播放
        // if (DataList.Result._v[0].Type == '参数') {
        //     if (HomeContent.Default.pausableType.value.pausable == false) {
        //         // HomeContent.Default.pausableType.value.pausable = false
        //         HomeContent.Default.pausableType.value.pausable = true
        //     }
        // }
        if(!HomeContent.Default.ispPausePlay.value) {
            if(DataList.Result._v[0].Content != '') {
                // 发消息播放
                await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.StartPlaySoundRequest(DataList.Result._v[0].Content))
            }
        }


    }

}

function show() {
    state.showHide = !state.showHide
}
//切换分类
async function seleClass(val: number, item: any) {
    console.log('切换分类',val,item);
    // 切换重新加载audio
    // audioRef.value.replay()
    // 语音播放
    if(!HomeContent.Default.ispPausePlay.value) {
        if(item.Content != '') {
           await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.StartPlaySoundRequest(item.Content))
        } else if(val == 4){
            await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.OnlyPausePlaySoundRequest())
        }
    }

    state.RecordID = -1
    state.EAI = false
    //关闭旋转
    WebSocketComponent.Default.PostMessage(new ClientMessage.OrbiiCameraAutoObservationMessage())
    //清除标签
    LabelComponent.Default.Clear()
    // 清除高亮
    await HighlighterComponent.Default.ClearAsync();
    state.tipsModelContent = item.Content
    state.tipsModelTitle = item.Title
    state.AssDuration = item.Duration
    state.selectedType = val

    if (state.StoragePath != '') {
        // 隐藏模型
        await GameObjectComponent.Default.HideAsync(newArr.value.get(state.StoragePath));
    }
    if (newArr.value.get(item.Asset) == undefined) {
        //首次加载
        Id = await AssetLoaderComponent.Default.LoadAsync(item.Asset);
        // 视角
        const PerspectiveData: ClientMessage.StructureAdapterResponse = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.StructureAdapterRequest(MessageCode.Default.MsgCodesList.STRUCTURE_GET_VIEW, item.Asset + item.Type))
        PerD = JSON.parse(PerspectiveData.Content).Result
        console.log('PerD',PerD);
        await OrbitCameraComponent.Default.UpdateV2Async(PerD.TargetContainer, PerD.Horizontal, PerD.Vertical, PerD.Distance, PerD.MinDistance, PerD.MaxDistance, PerD.RotateSensitivity, PerD.RotateSensitivity, PerD.ScrollSensitivity);
        // 储存键值对
        newArr.value.set(item.Asset, Id)
        state.StoragePath = item.Asset

        //模型自动旋转
        if (val == 1) {
            WebSocketComponent.Default.PostMessage(new ClientMessage.OrbiiCameraAutoObservationMessage(18))
        }

        // 模型动画
        if (val == 2) {
            // 标签方法
            await AnimatorComponent.Default.PlayAsync(Id, 'Default', state.AssDuration)
        } else if (val == 3) {
            await AnimatorComponent.Default.PlayAsync(Id, 'Default', state.AssDuration)
        }
        // await TimerComponent.Default.WaitAsync(6000)
        if (val == 2) {
            // 标签方法
            setTimeout(async () => {
                await LabelComponent.Default.LoadAsync(Id)
                state.EAI = true
            }, state.AssDuration);
        } else if (val == 4) {
            await LabelComponent.Default.LoadAsync(Id)
            state.EAI = true
        }
    } else {
        console.log('已加载')

        // 显示模型
        await GameObjectComponent.Default.ShowAsync(newArr.value.get(item.Asset));

        // 视角
        const PerspectiveData: ClientMessage.StructureAdapterResponse = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.StructureAdapterRequest(MessageCode.Default.MsgCodesList.STRUCTURE_GET_VIEW, item.Asset + item.Type))
        PerD = JSON.parse(PerspectiveData.Content).Result
        console.log('PerD',PerD);
        await OrbitCameraComponent.Default.UpdateV2Async(PerD.TargetContainer, PerD.Horizontal, PerD.Vertical, PerD.Distance, PerD.MinDistance, PerD.MaxDistance, PerD.RotateSensitivity, PerD.RotateSensitivity, PerD.ScrollSensitivity);
        // 储存键值对
        state.StoragePath = item.Asset

        //模型自动旋转
        if (val == 1) {
            WebSocketComponent.Default.PostMessage(new ClientMessage.OrbiiCameraAutoObservationMessage(18))
        }

        // 模型动画
        if (val == 2) {
            await AnimatorComponent.Default.PlayAsync(newArr.value.get(item.Asset), 'Default', state.AssDuration)
        } else if (val == 3) {
            await AnimatorComponent.Default.PlayAsync(newArr.value.get(item.Asset), 'Default', state.AssDuration)
        }
        // await TimerComponent.Default.WaitAsync(6000)
        if (val == 2) {
            await LabelComponent.Default.LoadAsync(newArr.value.get(item.Asset))
            state.EAI = true
            // 标签方法
            // setTimeout(async () => {
            //     await LabelComponent.Default.LoadAsync(newArr.value.get(item.Asset))
            //     state.EAI = true
            // }, state.AssDuration);
        } else if (val == 4) {
            await LabelComponent.Default.LoadAsync(newArr.value.get(item.Asset))
            state.EAI = true
        }
    }
    //语音播放
    // if (val == 4) {
    //     if (HomeContent.Default.pausableType.value.pausable == false) {
    //         // HomeContent.Default.pausableType.value.pausable = false
    //         // audioRef.value.replay()
    //         HomeContent.Default.pausableType.value.pausable = true
    //         // 切换重新加载audio
    //         audioRef.value.replay()
    //     }
    // }



}
// 切换侧边栏
function SelectSystem() {
    console.log('切换侧边栏',state.Classifications);
    
    // // 每切换一次，就先让播放结束为false
    // HomeContent.Default.endplay.value.ended = false
    // // 切换重新加载audio
    // audioRef.value.replay()

    // 先停止播放 
     
    // 重新获取内容播放
}
onMounted(() => {
    // // 首次进来,模拟一次点击事件
    // obtain(MenuIndexData.Default.MultimeterData.value.Key)
    // // HomeContent.Default.endplay.value.ended = false
    // console.log('HomeContent.Default.endplay.value.ended',HomeContent.Default.endplay.value.ended);
    // audioRef.value.replay()
    
    obtain(MenuIndexData.Default.MultimeterData.value.Key)
    
});
</script>

<style scoped>
.wp {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}

.Sidebar {
    position: absolute;
    top: 164px;
    left: -6px;
    width: 300px;
    height: 771px;
    background-image: url('/images/MenuBorder_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.SidebarHide {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 1044px;
}

.putAway {
    position: absolute;
    top: 350px;
    right: -44px;
    width: 66px;
    height: 81px;
    background-image: url('/images/collapseArrow.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.openBar {
    position: absolute;
    top: 500px;
    right: 0px;
    width: 66px;
    height: 81px;
    background-image: url('/images/collapseArrowHide.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.structure {
    float: left;
    width: 195px;
    height: 197px;
    background-image: url('/images/un_ClassOptions.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.structure_img {
    position: absolute;
    left: 80px;
    top: 68px;
    width: 42px;
    height: 36px;
    background-image: url('/images/jg_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.structure:hover {
    background-image: url('/images/ClassOptions.png');
}

.ChickOut {
    background-image: url('/images/ClassOptions.png') !important;
}

.structure:hover>.structure_img {
    background-image: url('/images/jg_bg_select.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.txt {
    position: absolute;
    bottom: 0;
    left: 84px;
    font-size: 18px;
    font-weight: 400;
    color: #EDFFFF;
}

.form {
    float: left;
    width: 195px;
    height: 197px;
    background-image: url('/images/un_ClassOptions.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.form_img {
    position: absolute;
    left: 84px;
    top: 71px;
    width: 34px;
    height: 34px;
    background-image: url('/images/zc_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.form:hover {
    background-image: url('/images/ClassOptions.png');
}

.form:hover>.form_img {
    background-image: url('/images/zc_bg_select.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.principle {
    float: left;
    width: 195px;
    height: 197px;
    background-image: url('/images/un_ClassOptions.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.principle_img {
    position: absolute;
    left: 83px;
    top: 69px;
    width: 36px;
    height: 36px;
    background-image: url('/images/yl_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.principle:hover {
    background-image: url('/images/ClassOptions.png');
}

.principle:hover>.principle_img {
    background-image: url('/images/yl_bg_select.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.parameter {
    float: left;
    width: 195px;
    height: 197px;
    background-image: url('/images/un_ClassOptions.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.parameter_img {
    position: absolute;
    left: 84px;
    top: 71px;
    width: 34px;
    height: 34px;
    background-image: url('/images/cs_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.parameter:hover {
    background-image: url('/images/ClassOptions.png');
}

.parameter:hover>.parameter_img {
    background-image: url('/images/cs_bg_select.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.btnBox {
    position: absolute;
    left: 50%;
    bottom: 31px;
    transform: translate(-50%, 0);
    height: 197px;
}

/* .ModelBox {

} */

.sign {
    position: absolute;
    top: 30px;
    width: 47px;
    height: 47px;
    background-image: url('/images/list_sign.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

:deep().ant-menu-submenu-selected>.ant-menu-submenu-title>.sign {
    width: 47px;
    height: 47px;
    background-image: url('/images/list_sign_select.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

:deep().ant-menu-submenu-title {
    padding-left: 36px !important;
}

:deep().ant-menu-title-content {
    margin: 0 !important;
}

:deep().ant-menu-title-content:hover {
    color: #1890ff;
}

:deep().ant-menu-sub.ant-menu-inline>.ant-menu-item {
    border-bottom: 1px solid #234163;
    margin: 0;
    padding-left: 56px !important;
}

:deep().ant-menu {
    background-color: transparent;
    color: #fff;
    border: none;
    width: 240px;
}

:deep().ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background-color: transparent;
}

:deep().ant-menu-item-selected {
    color: #1890ff;
}

:deep().ant-menu-submenu-selected {
    color: #1890ff;
}

:deep().ant-menu-item::after {
    border: none;
}

:deep().ant-menu-submenu-inline .ant-menu-submenu-arrow::after {
    color: #fff;
}

:deep().ant-menu-submenu-inline .ant-menu-submenu-arrow::before {
    color: #fff;
}

.drop-downMenu {
    width: 280px;
    height: 720px;
    margin-top: 30px;
    overflow-y: auto;
    overflow-x: hidden;
}

:deep().ant-tree::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

:deep().ant-tree::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/

    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #45B5FF;
}

:deep().ant-tree::-webkit-scrollbar-track {
    /*滚动条里面轨道*/

    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #123965;
}

:deep().ant-tree {
    margin-top: 30px;
    width: 280px;
    height: 700px;
    color: #fff;
    overflow-y: auto;
    background: transparent;
    padding-left: 25px;
    font-size: 16px;
    overflow-x: hidden;
}

:deep().ant-tree-title {
    line-height: 38px;

}

:deep().ant-tree .ant-tree-node-content-wrapper {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 150px;
}

:deep().ant-tree-switcher {
    line-height: 38px;
}

:deep().ant-tree-switcher-noop {
    display: none;
}

:deep().ant-tree-node-selected {
    background: transparent !important;
    color: rgb(69, 190, 238);
}

:deep().ant-tree-node-content-wrapper:hover {
    background: transparent !important;
    color: rgb(69, 190, 238);
}

:deep().ant-tree-node-content-wrapper-normal:hover {
    background: transparent !important;
    color: rgb(69, 190, 238);
}

</style>